<template>
    <div>
        <span class="hotelWeekString" @click="openWeekEnd">
            周末:<span style="color: #1890FF;text-decoration: underline;">{{ this.hotelWeekString }}</span>
        </span>

        <el-dialog title="周末" :visible.sync="weekEnd.isShow" width="550px" append-to-body>
            <el-form ref="weekEndForm" :rules="weekEnd.rules" :model="weekEnd.form" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="hotelWeekEnd" label="适用星期">
                            <el-checkbox-group v-model="weekEnd.form.hotelWeekEnd">
                                <el-checkbox label="1">星期一</el-checkbox>
                                <el-checkbox label="2">星期二</el-checkbox>
                                <el-checkbox label="3">星期三</el-checkbox>
                                <el-checkbox label="4">星期四</el-checkbox>
                                <el-checkbox label="5">星期五</el-checkbox>
                                <el-checkbox label="6">星期六</el-checkbox>
                                <el-checkbox label="7">星期日</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postEditWeekEnd">确 定</el-button>
                <el-button @click="cancelEditWeekEnd">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getHotelWeekEndByHotelId, postEditWeekEnd } from "@/api/hotel/hotel";

export default {
    name: 'WeekEnd',
    props: ['hotelId'],
    data() {
        return {
            hotelWeekString: undefined,
            daysOfWeek: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            weekEnd: {
                isShow: false,
                form: {
                    hotelWeekEnd: []
                },
                rules: {
                    hotelWeekEnd: [
                        { required: true, message: "请选择星期", trigger: "blur" },
                    ]
                }
            }
        }
    },
    created() {
        this.getHotelWeekEndByHotelId();
    },
    methods: {
        getHotelWeekEndByHotelId() {
            if (this.hotelId) {
                getHotelWeekEndByHotelId({ hotelId: this.hotelId }).then(response => {
                    this.weekEnd.form.hotelWeekEnd = response.data.map(item => String(item));
                    this.hotelWeekString = response.data.map(day => this.daysOfWeek[day - 1]).join(', ');
                }
                );
            }
        },
        openWeekEnd() {
            this.weekEnd.isShow = true;
        },
        postEditWeekEnd() {
            this.$refs["weekEndForm"].validate(valid => {
                if (valid) {
                    this.weekEnd.form.hotelId = this.hotelId;
                    postEditWeekEnd(this.weekEnd.form).then(response => {
                        if (response.code === 200) {
                            this.$modal.msgSuccess("修改成功");
                            this.weekEnd.isShow = false;
                            this.getHotelWeekEndByHotelId();
                        }
                    });
                }
            })
        },
        cancelEditWeekEnd() {
            this.weekEnd.isShow = false;
        }
    }
}
</script>

<style>
.hotelWeekString {
    font-size: 16px;
    cursor: pointer;
}
</style>